import React, {useEffect, useState} from 'react';
import {
  View,
  TextInput,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from '../Register/style';
import {Icon, Toast} from '@ant-design/react-native';
import {login} from '../../service/login';
import {setToken} from '../../utils/Authority';

const Login = () => {
  const navigation = useNavigation();
  const [username, onChangeUsername] = useState('');
  const [password, onChangeTextPassword] = useState('');
  const [secureText, setSecureText] = useState(true);
  const loginRequest = () => {
    login({
      username,
      password,
    }).then((res) => {
      console.log(res);
      // console.log(res.token);
      // 存储cookie
      // storage.save('token', res.token);
      if(res.code===200){
        setToken(res?.token);
        navigation.replace('Tab');
      }else{
        Toast.fail(res.msg, 2);
      }
      
    });
  };

  return (
    <AreaView>
      <View style={styles.logo_area}>
        <Image
          style={styles.logo}
          source={require('../../assets/images/logo.png')}
        />
      </View>
      <View style={[styles.input_container, styles.top]}>
        <Icon name="user" style={styles.passwd_clock} />
        <Text style={styles.login_input_info}>账号</Text>
        <TextInput
          style={styles.input}
          placeholder="请输入用户名/手机号"
          value={username}
          onChangeText={(text) => onChangeUsername(text)}
        />
      </View>
      <View style={styles.input_container}>
        <Icon name="lock" style={styles.passwd_clock} />
        <Text style={styles.login_input_info}>密码</Text>
        <TextInput
          style={styles.input}
          placeholder="请输入密码"
          secureTextEntry={secureText}
          value={password}
          onChangeText={(text) => onChangeTextPassword(text)}
        />
        <TouchableOpacity
          onPress={() => {
            setSecureText(!secureText);
          }}
        >
          <Icon name={secureText ? "eye" : "eye-invisible"} style={styles.passwd_clock} />
        </TouchableOpacity>
      </View>

      <View style={styles.login_container}>
        <TouchableOpacity
          onPress={() => {
            navigation.push('FindPswd');
          }}
          style={styles.flex_1}>
          <Text style={styles.btn_color}>忘记密码</Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => {
            navigation.push('Register');
          }}
          style={styles.text_right}>
          <Text style={styles.font_color}>注册</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.btn_container}>
        <TouchableOpacity
          style={styles.btn}
          onPress={() => {
            loginRequest();
          }}>
          <Text style={styles.btn_text}>登录</Text>
        </TouchableOpacity>
      </View>
    </AreaView>
  );
};

export default Login;
